<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Spectacle One-Page Example</title>
  </head>
  <body>
    <div id="root"></div>

    <script type="importmap">
      {
        "imports": {
          "htm": "https://esm.sh/htm@^3?external=react,react-dom",
          "spectacle": "https://esm.sh/spectacle@10?external=react,react-dom&bundle",
          "broadcast-channel": "https://esm.sh/broadcast-channel@^4.17.0?external=react,react-dom",
          "history": "https://esm.sh/history@^5.3.0?external=react,react-dom",
          "kbar": "https://esm.sh/kbar@0.1.0-beta.40?external=react,react-dom",
          "lodash.clonedeep": "https://esm.sh/lodash.clonedeep@^4.5.0?external=react,react-dom",
          "mdast-builder": "https://esm.sh/mdast-builder@^1.1.1?external=react,react-dom",
          "mdast-zone": "https://esm.sh/mdast-zone@^4.0.0?external=react,react-dom",
          "merge-anything": "https://esm.sh/merge-anything@^3.0.3?external=react,react-dom",
          "mousetrap": "https://esm.sh/mousetrap@^1.6.5?external=react,react-dom",
          "query-string": "https://esm.sh/query-string@^7.1.3?external=react,react-dom",
          "react": "https://esm.sh/react@18.2.0?",
          "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime?",
          "react-dom": "https://esm.sh/react-dom@18.2.0?",
          "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?",
          "react-fast-compare": "https://esm.sh/react-fast-compare@^3.2.0?external=react,react-dom",
          "react-is": "https://esm.sh/react-is@^18.1.0?external=react,react-dom",
          "react-spring": "https://esm.sh/react-spring@^9.5.5?external=react,react-dom",
          "react-swipeable": "https://esm.sh/react-swipeable@^7.0.0?external=react,react-dom",
          "react-syntax-highlighter": "https://esm.sh/react-syntax-highlighter@^15.5.0?external=react,react-dom",
          "react-syntax-highlighter/dist/cjs/styles/prism/vs-dark.js": "https://esm.sh/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/vs-dark.js?external=react,react-dom",
          "react-syntax-highlighter/dist/cjs/styles/prism/index.js": "https://esm.sh/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/index.js?external=react,react-dom",
          "rehype-raw": "https://esm.sh/rehype-raw@^5.1.0?external=react,react-dom",
          "rehype-react": "https://esm.sh/rehype-react@^6.0.0?external=react,react-dom",
          "remark-parse": "https://esm.sh/remark-parse@^8.0.3?external=react,react-dom",
          "remark-rehype": "https://esm.sh/remark-rehype@^7.0.0?external=react,react-dom",
          "styled-components": "https://esm.sh/styled-components@^5.3.6?external=react,react-dom",
          "styled-system": "https://esm.sh/styled-system@5.1.5?external=react,react-dom",
          "unified": "https://esm.sh/unified@^9.0.0?external=react,react-dom",
          "unist-util-visit": "https://esm.sh/unist-util-visit@^2.0.3?external=react,react-dom",
          "use-resize-observer": "https://esm.sh/use-resize-observer@^9.0.2?external=react,react-dom"
        }
      }
    </script>
    <script type="module">
      import React from 'react';
      import { createRoot } from 'react-dom/client';
      import {
        FlexBox,
        Heading,
        SpectacleLogo,
        UnorderedList,
        CodeSpan,
        OrderedList,
        ListItem,
        Appear,
        Slide,
        Deck,
        Text,
        FitText,
        Grid,
        Box,
        Image,
        CodePane,
        MarkdownSlide,
        MarkdownSlideSet,
        Notes,
        DefaultTemplate,
        SlideLayout
      } from 'spectacle';

      import htm from 'htm';
      const html = htm.bind(React.createElement);
      const formidableLogo = 'https://avatars2.githubusercontent.com/u/5078602?s=280&v=4';



      // SPECTACLE_CLI_THEME_START
      const theme = {
        fonts: {
          header: '"Open Sans Condensed", Helvetica, Arial, sans-serif',
          text: '"Open Sans Condensed", Helvetica, Arial, sans-serif'
        }
      };

      // SPECTACLE_CLI_THEME_END
      const SlideFragments = () => html`
        <${Slide} key="slide-fragment-1">
          <${Text}>This is a slide fragment.</${Text}>
        </${Slide}>
        <${Slide} key="slide-fragment-2">
          <${Text}>This is also a slide fragment.</${Text}>
          <${Appear}>
            <${Text}>This item shows up!</${Text}>
          </${Appear}>
          <${Appear}>
            <${Text}>This item also shows up!</${Text}>
          </${Appear}>
        </${Slide}>
      `;
      const template = html`
        <${DefaultTemplate} />`;
        const Presentation = () => html`<${Deck} theme=${theme} template=${template}>
          <${Slide}>
            <${FlexBox} height="100%">
              <${SpectacleLogo} size=${500} />
            </${FlexBox}>
            <${Notes}>Spectacle supports notes per slide.<ol>
                <li>Notes can now be HTML markup!</li>
                <li>Lists can make it easier to make points.</li>
              </ol>
            </${Notes}>
          </${Slide}>
          <${Slide}>
            <${FlexBox} height="100%" flexDirection="column">
              <${Heading} margin="0px" fontSize="150px">✨<i>Spectacle</i> ✨</${Heading}>
              <${Heading} margin="0px" fontSize="h2">A ReactJS Presentation Library</${Heading}>
              <${Heading} margin="0px 32px" color="primary" fontSize="h3">Where you can write your decks in JSX, Markdown, or MDX!</${Heading}>
            </${FlexBox}>
          </${Slide}>
          <${Slide} transition=${{
          from: {
            transform: 'scale(0.5) rotate(45deg)',
            opacity: 0
          },
          enter: {
            transform: 'scale(1) rotate(0)',
            opacity: 1
          },
          leave: {
            transform: 'scale(0.2) rotate(315deg)',
            opacity: 0
          }
        }} backgroundColor="tertiary" backgroundImage="url(https://github.com/FormidableLabs/dogs/blob/main/src/beau.jpg?raw=true)" backgroundOpacity=${0.5}>
            <${Heading}>Custom Backgrounds</${Heading}>
            <${UnorderedList}>
              <${ListItem}>
                <${CodeSpan}>backgroundColor</${CodeSpan}>
              </${ListItem}>
              <${ListItem}>
                <${CodeSpan}>backgroundImage</${CodeSpan}>
              </${ListItem}>
              <${ListItem}>
                <${CodeSpan}>backgroundOpacity</${CodeSpan}>
              </${ListItem}>
              <${ListItem}>
                <${CodeSpan}>backgroundSize</${CodeSpan}>
              </${ListItem}>
              <${ListItem}>
                <${CodeSpan}>backgroundPosition</${CodeSpan}>
              </${ListItem}>
              <${ListItem}>
                <${CodeSpan}>backgroundRepeat</${CodeSpan}>
              </${ListItem}>
            </${UnorderedList}>
          </${Slide}>
          <${Slide}>
            <${Heading}>Animated Elements</${Heading}>
            <${OrderedList}>
              <${Appear}>
                <${ListItem}>Elements can animate in!</${ListItem}>
              </${Appear}>
              <${Appear}>
                <${ListItem}>Out of order</${ListItem}>
              </${Appear}>
              <${Appear} priority=${0}>
                <${ListItem}>Just identify the order with the prop <${CodeSpan}>priority</${CodeSpan}>!</${ListItem}>
              </${Appear}>
            </${OrderedList}>
          </${Slide}>
          <${Slide}>
            <${Heading}>This is a Heading</${Heading}>
            <${FitText}>This is a <${CodeSpan}>FitText</${CodeSpan}> component</${FitText}>
            <${FitText} color="secondary" style=${{
          textTransform: 'uppercase',
          fontFamily: 'Comic Sans MS'
        }}>Shorter fit text</${FitText}>
            <${Text}>This is a Text. (Resize this window!)</${Text}>
          </${Slide}>
          <${Slide}>
            <${FlexBox}>
              <${Text}>These</${Text}>
              <${Text}>Text</${Text}>
              <${Text} color="secondary">Items</${Text}>
              <${Text} fontWeight="bold">Flex</${Text}>
            </${FlexBox}>
            <${Grid} gridTemplateColumns="1fr 2fr" gridColumnGap=${15}>
              <${Box} backgroundColor="primary">
                <${Text} color="secondary">Single-size Grid Item</${Text}>
              </${Box}>
              <${Box} backgroundColor="secondary">
                <${Text}>Double-size Grid Item</${Text}>
              </${Box}>
            </${Grid}>
            <${Grid} gridTemplateColumns="1fr 1fr 1fr" gridTemplateRows="1fr 1fr 1fr" gridRowGap=${1}>
              ${Array(9).fill('').map((_, index) => html`<${FlexBox} paddingTop=${0} key=${`formidable-logo-${index}`} flex=${1}>
                <${Image} src=${formidableLogo} width=${100} />
              </${FlexBox}>`)}
            </${Grid}>
          </${Slide}>
          <${SlideFragments} />
          <${Slide}>
            <${CodePane} language="jsx">
              ${`
                import { createClient, Provider } from 'urql';

                const client = createClient({ url: 'https://0ufyz.sse.codesandbox.io' });

                const App = () => (
                  <Provider value={client}>
                    <Todos />
                  </Provider>
                );
                `}
            </${CodePane}>
            <${Box} height=${20} />
            <${CodePane} language="java" showLineNumbers=${false}>
              ${`
                public class NoLineNumbers {
                  public static void main(String[] args) {
                    System.out.println("Hello");
                  }
                }
                `}
            </${CodePane}>
          </${Slide}>
          <div>
            <${Slide}>
              <${Heading}>This is a slide embedded in a div</${Heading}>
            </${Slide}>
          </div>
          <${MarkdownSlide} componentProps=${{
          color: 'yellow'
        }}>
            ${`
                # This is a Markdown Slide

                - You can pass props down to all elements on the slide.
                - Just use the \`componentProps\` prop.
                `}
          </${MarkdownSlide}>
          <${MarkdownSlide} animateListItems>
            ${`
               # This is also a Markdown Slide

               It uses the \`animateListItems\` prop.

               - Its list items...
               - ...will appear...
               - ...one at a time.
              `}
          </${MarkdownSlide}>
          <${Slide}>
            <${Grid} gridTemplateColumns="50% 50%" gridTemplateRows="50% 50%" height="100%">
              <${FlexBox} alignItems="center" justifyContent="center">
                <${Heading}>This is a 4x4 Grid</${Heading}>
              </${FlexBox}>
              <${FlexBox} alignItems="center" justifyContent="center">
                <${Text} textAlign="center">With all the content aligned and justified center.</${Text}>
              </${FlexBox}>
              <${FlexBox} alignItems="center" justifyContent="center">
                <${Text} textAlign="center">It uses Spectacle <${CodeSpan}>
                    ${"<Grid />"}
                  </${CodeSpan}> and <${CodeSpan}>
                    ${"<FlexBox />"}
                  </${CodeSpan}> components.</${Text}>
              </${FlexBox}>
              <${FlexBox} alignItems="center" justifyContent="center">
                <${Box} width=${200} height=${200} backgroundColor="secondary" />
              </${FlexBox}>
            </${Grid}>
          </${Slide}>
          <${MarkdownSlideSet}>
            ${`
                # This is the first slide of a Markdown Slide Set
                ---
                # This is the second slide of a Markdown Slide Set
                `}
          </${MarkdownSlideSet}>
          <${SlideLayout.List} title="Slide layouts!" items=${['Two-column', 'Lists' , 'And more!' ]} animateListItems />
        </${Deck}>
      `;
      const root = createRoot(document.getElementById('root'));
      root.render(html`<${Presentation}/>`);
    </script>
  </body>
</html>
